<template>
  <div class="carousel-container">
    <a-carousel
      :autoplay="autoplay"
      :autoplaySpeed="autoplaySpeed"
      :dots="showDots"
      :arrows="showArrows"
      :effect="effect"
      :afterChange="afterChange"
      :beforeChange="beforeChange"
      :dotPosition="dotPosition"
    >
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        <img :src="item.image" :alt="item.alt || 'Slide ' + (index + 1)" />
        <div v-if="item.title || item.description" class="carousel-caption">
          <h3 v-if="item.title">{{ item.title }}</h3>
          <p v-if="item.description">{{ item.description }}</p>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  items: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every((item) => item.image);
    },
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  autoplaySpeed: {
    type: Number,
    default: 3000,
  },
  showDots: {
    type: Boolean,
    default: true,
  },
  showArrows: {
    type: Boolean,
    default: true,
  },
  effect: {
    type: String,
    default: "scrollx",
    validator: (value) => ["scrollx", "fade"].includes(value),
  },
  dotPosition: {
    type: String,
    default: "bottom",
    validator: (value) => ["top", "bottom", "left", "right"].includes(value),
  },
  afterChange: {
    type: Function,
    default: () => {},
  },
  beforeChange: {
    type: Function,
    default: () => {},
  },
});
</script>

<style scoped>
.carousel-container {
  width: 100%;
  margin: 0 auto;
}

.carousel-item {
  position: relative;
  height: 400px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.carousel-caption h3 {
  margin-bottom: 8px;
  font-size: 24px;
}

.carousel-caption p {
  margin: 0;
  font-size: 16px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .carousel-item {
    height: 250px !important;
  }

  .carousel-caption {
    padding: 10px;
  }

  .carousel-caption h3 {
    font-size: 18px !important;
  }

  .carousel-caption p {
    font-size: 14px !important;
  }
}
</style>
